<template>
    <view class="page-index" :style="{ direction: $store.state.dir }">
        <Header
            :locale="locale"
            @childEvent="childEvent"
            @search="onSearch"
        ></Header>
        <u-sticky class="top-bar" style="background-color: #f9fbff; top: 0">
        </u-sticky>
        <view class="content flex-layout-col">
            <!-- <house-card v-for="house in houses" :detail="house" :type="filter.type" :key="house.id"></house-card>
			<view class="empty" v-if="houses.length<=0">
				<image src="../../static/list.png" mode=""></image>
				<p>暂无房源</p>
			</view> -->
            <view class="cate_list">
                <ul>
                    <li
                        v-for="(item, index) in cateList"
                        :key="index"
                        @click.stop="handleCate(item, index)"
                    >
                        <image :src="item.url" mode=""></image>
                        <p>{{ item.name }}</p>
                    </li>
                </ul>
            </view>
            <p>Business List</p>
            <business-list
                v-for="item in shopList"
                :detail="item"
            ></business-list>
            <u-loadmore v-if="hasMore" :status="loadStatus" />
        </view>
        <view class="empty" v-if="shopList.length <= 0">
            <image src="../../static/list.png" mode=""></image>
            <p>No products available</p>
        </view>
        <view class="footer">
            <image
                src="/static/earn_money.png"
                @click.stop="handleSignIn"
                mode=""
            ></image>
        </view>
        <u-popup round="20" :show="isFilter" @close="close" @open="open">
            <filter-form @filter="handleFilter"></filter-form>
        </u-popup>
    </view>
</template>

<script>
import { houseList, houseSearch, getArea } from "../../lib/service";
import { getShop } from "@/lib/business.js";
import { houses } from "../../lib/data";
import { showFailure } from "../../lib/helper";
import Header from "@/components/header/header.vue";
export default {
    data() {
        return {
            loadStatus: "loadmore",
            keyword: "",
            category: "",
            currentPage: 1,
            pageSize: 2,
            hasMore: false,
            shopList: [],
            cateList: [
                {
                    url: "/static/menu/icon_01.png",
                    type: "1",
                    name: `restaurant & drinks`,
                },
                {
                    url: "/static/menu/icon_02.png",
                    type: "2",
                    name: "sport&gym",
                },
                {
                    url: "/static/menu/icon_03.png",
                    type: "3",
                    name: "haircut & saloon",
                },
                {
                    url: "/static/menu/icon_04.png",
                    type: "4",
                    name: "entertainment",
                },
                {
                    url: "/static/menu/icon_05.png",
                    type: "5",
                    name: "life servie",
                },
                {
                    url: "/static/menu/icon_06.png",
                    type: "6",
                    name: "cloth&shoes",
                },
                {
                    url: "/static/menu/icon_07.png",
                    type: "100",
                    name: "others",
                },
            ],
            filter: {
                keyword: "",
                priceMin: "",
                priceMax: "",
                countryId: "",
                cityId: "",
                houseType: "",
                // regionId:'',
                sdate: "",
                edate: "",
                type: 4,
            },
            isFilter: false,
            houses: [],
            navIndex: 0,
            type: "1",
        };
    },
    components: {
        Header,
    },
    computed: {
        navList() {
            return [
                {
                    title: this.$t("text.rent"),
                    id: 1,
                    imageUrl: "../../static/home/nav/rent.png",
                    activeUrl: "../../static/home/nav/rent_active.png",
                },
                {
                    title: this.$t("text.hotel"),
                    id: 4,
                    imageUrl: "../../static/home/nav/family_hotel.png?v=1",
                    activeUrl:
                        "../../static/home/nav/family_hotel_active.png?v=1",
                },
                {
                    title: this.$t("text.second.house"),
                    id: 2,
                    imageUrl: "../../static/home/nav/second_house.png",
                    activeUrl: "../../static/home/nav/second_house_active.png",
                },
                {
                    title: this.$t("text.new.house"),
                    id: 3,
                    imageUrl: "../../static/home/nav/new_house.png",
                    activeUrl: "../../static/home/nav/new_house_active.png",
                },
            ];
        },
        locale() {
            return this.$store.state.language;
        },
    },
    onLoad() {
        this.loadData();
    },
    onTabItemTap() {
        this.initLoad();
    },
    onReachBottom() {
        if (this.hasMore) {
            this.currentPage = this.currentPage + 1;
            this.loadData();
        }
    },
    methods: {
        initLoad() {
            this.currentPage = 1;
            this.filter = {
                keyword: "",
                priceMin: "",
                priceMax: "",
                countryId: "",
                cityId: "",
                houseType: "",
                // regionId:'',
                sdate: "",
                edate: "",
                type: 4,
            };
            this.loadData(true);
        },
        handleCate(item, index) {
            this.category = item.type;
            this.currentPage = 1;
            this.shopList = [];
            this.loadData(true);
        },
        loadData(isReset) {
            this.loadStatus = "loading";
            let obj = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
            };
            if (this.category) {
                obj["category"] = this.category;
            }
            getShop(obj)
                .then((res) => {
                    uni.hideLoading();
                    this.hasMore = res.data.hasMore;
                    if (!this.hasMore) {
                        this.loadStatus = "no-more";
                    }
                    if (isReset) {
                        this.shopList = res.data.records;
                    } else {
                        this.shopList = this.shopList.concat(res.data.records);
                    }
                })
                .catch((res) => {
                    this.loadStatus = "no-more";
                    uni.hideLoading();
                    showFailure();
                });
            // uni.getLocation({
            // 	// #ifdef APP-PLUS
            // 	type: 'gcj02', // App 端推荐使用 wgs84 坐标系
            // 	// #endif
            // 	// #ifdef H5
            // 	type: 'wgs84', // H5 端可以使用 gcj02 坐标系
            // 	// #endif
            // 	 timeout: 10000,
            // 	success: function(res) {
            // 		console.log('纬度：' + res.latitude);
            // 		console.log('经度：' + res.longitude);
            // 		obj['latitude'] = res.latitude;
            // 		obj['longitude'] = res.longitude;
            // 		getShop(obj).then((res) => {
            // 				uni.hideLoading();
            // 				this.loadStatus = 'no-more';
            // 				this.hasMore = res.data.hasMore;
            // 				if (isReset) {
            // 					this.shopList = res.data.records;
            // 				} else {
            // 					this.shopList = this.houses.concat(res.data.records);
            // 				}
            // 			})
            // 			.catch((res) => {
            // 				this.loadStatus = 'no-more';
            // 				uni.hideLoading();
            // 				showFailure();
            // 			});
            // 	},
            // 	fail: function(err) {
            // 		console.error('获取位置失败:', err);
            // 	}
            // });
        },
        // loadData(isReset) {
        // 	this.loadStatus = 'loading';
        // 	let obj = {
        // 		pageNo: this.currentPage,
        // 		pageSize: this.pageSize,
        // 		type: this.filter.type,
        // 	}
        // 	if(this.filter.keyword){
        // 		obj['keyword'] = this.filter.keyword
        // 	}
        // 	if(this.filter.countryId){
        // 		obj['countryId'] = this.filter.countryId
        // 	}
        // 	if(this.filter.cityId){
        // 		obj['cityId'] = this.filter.cityId
        // 	}
        // 	// if(this.filter.regionId){
        // 	// 	obj['regionId'] = this.filter.regionId
        // 	// }
        // 	if(this.filter.houseType){
        // 		obj['houseType'] = this.filter.houseType
        // 	}
        // 	if(this.filter.priceMin){
        // 		obj['priceMin'] = this.filter.priceMin
        // 	}
        // 	if(this.filter.priceMax){
        // 		obj['priceMax'] = this.filter.priceMax
        // 	}
        // 	if(this.filter.sdate){
        // 		obj['sdate'] = this.filter.sdate
        // 	}
        // 	if(this.filter.edate){
        // 		obj['edate'] = this.filter.edate
        // 	}
        // 	houseSearch(obj).then((res) => {
        // 			uni.hideLoading();
        // 			this.loadStatus = 'no-more';
        // 			this.hasMore = res.data.hasMore;
        // 			if (isReset) {
        // 				this.houses = res.data.records;
        // 			} else {
        // 				this.houses = this.houses.concat(res.data.records);
        // 			}
        // 		})
        // 		.catch((res) => {
        // 			this.loadStatus = 'no-more';
        // 			uni.hideLoading();
        // 			showFailure();
        // 		});
        // },
        handleChoose(item, index) {
            this.type = item.id;
            this.navIndex = index;
            this.currentPage = 1;
            this.houses = [];
            this.loadData(true);
        },
        handleSearch() {
            uni.showToast({
                title: this.keyword,
            });
        },
        open() {},
        handleFilterPop() {
            this.isFilter = true;
        },
        handleFilter(value) {
            this.filter = {
                propertyType: value.houseType[0] || "",
                type: value.saleType[0] || "",
                priceMin: value.min,
                priceMax: value.max,
            };
            this.currentPage = 1;
            this.isFilter = false;
            uni.showLoading();
            this.loadData(true);
        },
        // 签到
        handleSignIn() {
            uni.navigateTo({
                url: "./sign_in",
            });
        },
        close() {
            this.isFilter = false;
        },
        // 切换语言
        handleLocale() {
            if (this.locale == "en") {
                this.$i18n.locale = "ar";
            } else {
                this.$i18n.locale = "en";
            }
            // this.locale = this.$i18n.locale;
            this.$store.dispatch("setLanguage", this.$i18n.locale);
        },
        childEvent(e) {
            this.setTabBarItems();
            uni.$emit("appLaunched");
        },
        onSearch(item) {
            this.filter = item;
            this.currentPage = 1;
            this.isFilter = false;
            uni.showLoading();
            this.loadData(true);
        },
        setTabBarItems() {
            uni.setTabBarItem({
                index: 0,
                text: this.$t("tab.index"),
            });
            uni.setTabBarItem({
                index: 1,
                text: this.$t("tab.fav"),
            });
            uni.setTabBarItem({
                index: 2,
                text: this.$t("tab.message"),
            });
            uni.setTabBarItem({
                index: 3,
                text: this.$t("tab.user"),
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.cate_list {
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 25%;
            text-align: center;
            margin-bottom: 20rpx;
            image {
                width: 76rpx;
                height: 76rpx;
            }
            p {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #666666;
                line-height: 28rpx;
                text-align: center;
                word-break: break-all;
                margin: 0 auto;
            }
        }
        li:first-child p {
            width: 140rpx;
        }
        li:nth-child(3) p {
            width: 108rpx;
        }
    }
}
.footer {
    position: fixed;
    right: 0;
    bottom: 238rpx;

    image {
        width: 128rpx;
        height: 134rpx;
    }
}

.empty {
    text-align: center;

    image {
        width: 376rpx;
        height: 376rpx;
    }

    p {
        font-size: 28rpx;
        color: #999999;
    }
}

page {
    background-color: #f9fbff;
}
</style>
<style lang="scss" scoped>
.content {
    margin-top: 40rpx;

    > p {
        font-family: Manrope, Manrope;
        font-weight: bold;
        font-size: 36rpx;
        color: #1c120d;
    }
}

.page-index {
    &-title {
        display: flex;
        // flex-flow: column;
        justify-content: space-between;
        padding: 0 20px;
    }

    &-nav {
        margin: 20rpx;

        ul {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .active {
                p {
                    color: #333333 !important;
                }
            }

            li {
                text-align: center;

                image {
                    width: 60rpx;
                    height: 60rpx;
                }

                p {
                    font-family: Noto Sans S Chinese;
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #999999;
                }
            }
        }
    }

    .top-bar {
        background-color: #fff;
    }
}

.filter-button {
    width: 42px;
    height: 42px;
    background-color: $app-color-primary;
    border-radius: 8px;
    color: #fff;
}

.index-search-bar {
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.search {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 42px;
    background-color: #fff;

    input {
        width: 100%;
        margin-left: 10px;
    }
}
</style>
